<template>
  <div class="backimg">
    <div class="login_bg">
      <div class="login-css">
        <div class="header">
          <div class="login-title">
            <p class="title01">以调适为核心建筑数字能源管理</p>
            <p class="title02">
              Building Commissioning Based Digital Building Energy Management
            </p>
          </div>

          <div class="right">
            <div>
              <el-dropdown
                popper-class="langPopover"
                trigger="click"
                @command="langHandleCommand"
              >
                <span class="el-dropdown-link lang">
                  {{ language }}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu class="languageDropdown">
                    <el-dropdown-item command="zh-cn">中文</el-dropdown-item>
                    <el-dropdown-item command="en">英文</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>

            <div>
              <el-dropdown
                popper-class="resourcesPopover"
                trigger="click"
                @command="resources"
              >
                <span class="el-dropdown-link resources">
                  资源
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu class="resourcesDropdown">
                    <el-dropdown-item command="jj">系统简介</el-dropdown-item>
                    <el-dropdown-item command="sm">使用说明</el-dropdown-item>
                    <el-dropdown-item command="jd"
                      >调适潜力智慧诊断</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>

        <div class="login-css-title">
          <div>
            <span class="maxOAO">OAO</span>
          </div>
          <div class="title-top">
            <p class="login-title-01">线上+线下智慧陪伴式运维</p>
            <p class="login-title-02">
              Online and Offline Accompanying Smart Operation
            </p>
          </div>
        </div>
        <div class="login_main">
          <div v-if="isWjmm === false" class="login-form">
            <div class="jiaohao" @click="login()">
              <Jiaohao></Jiaohao>
            </div>
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              class="demo-ruleForm"
              status-icon
            >
              <el-form-item prop="adminTel">
                <el-input
                  v-model="ruleForm.adminTel"
                  class="input01"
                  placeholder="请输入用户名"
                >
                  <template #prefix>
                    <span class="iconfont icon-yonghu"></span>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="adminPwd">
                <el-input
                  v-model="ruleForm.adminPwd"
                  class="password-css"
                  placeholder="请输入密码"
                  type="password"
                >
                  <template #prefix>
                    <span class="iconfont icon-mima"></span>
                  </template>
                  <template #append class="jizhumima">
                    <el-checkbox v-model="checked">{{
                      $t("login.password")
                    }}</el-checkbox>
                  </template>
                  >
                </el-input>
              </el-form-item>
              <el-form-item prop="age">
                <el-input
                  v-model="ruleForm.age"
                  :placeholder="$t('login.verifyCode')"
                  class="verification"
                >
                  <template #prefix>
                    <span class="iconfont icon-dunpai"></span>
                  </template>
                  <template #append>
                    <VerificationCode
                      v-model:changeCode="identifyCode"
                    ></VerificationCode>
                  </template>
                </el-input>
              </el-form-item>
              <div class="wjmima">
                <span @click="wjmm()">{{ $t("login.forget") }}？</span>
              </div>
            </el-form>
          </div>

          <div v-else-if="isWjmm === true" class="login-form">
            <div class="jiaohao" @click="loginWjmm()">
              <Jiaohao></Jiaohao>
            </div>
            <el-form
              ref="forgetForm"
              :model="forgetdata"
              :rules="rules1"
              class="demo-ruleForm"
              status-icon
            >
              <el-form-item prop="adminTel">
                <el-input
                  v-model="forgetdata.adminTel"
                  class="input01"
                  placeholder="请输入用户名"
                >
                  <template #prefix>
                    <span class="iconfont icon-yonghu"></span>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input
                  v-model="forgetdata.code"
                  class="verification"
                  placeholder="请输入短信验证码"
                >
                  <template #prefix>
                    <span class="iconfont icon-dunpai"></span>
                  </template>
                  <template #append>
                    <div>获取验证码</div>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="newadminPwd">
                <el-input
                  v-model.number="forgetdata.newadminPwd"
                  placeholder="请输入6-18位,包含字母、数字的新密码"
                  show-password
                  type="password"
                >
                  <template #prefix>
                    <span class="iconfont icon-mima"></span>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="queadminPwd">
                <el-input
                  v-model="forgetdata.queadminPwd"
                  placeholder="请确认新密码"
                  show-password
                  type="password"
                >
                  <template #prefix>
                    <span class="iconfont icon-mima"></span>
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

      <el-dialog
        v-model="briefDialogTableVisible"
        custom-class="briefDialog"
        title="系统简介"
        width="35%"
      >
        <div class="content">
          {{ synopsis }}
        </div>
        <template #footer>
          <span class="dialog-footer">
            <button @click="briefDialogTableVisible = false">我知道了</button>
            <button>下载详细资料</button>
          </span>
        </template>
      </el-dialog>

      <el-dialog
        v-model="explainDialogTableVisible"
        custom-class="briefDialog"
        title="使用说明"
        width="35%"
      >
        <div class="content">
          {{ instructions }}
        </div>
        <template #footer>
          <span class="dialog-footer">
            <button @click="explainDialogTableVisible = false">我知道了</button>
            <button>下载详细资料</button>
          </span>
        </template>
      </el-dialog>
    </div>
    <div class="remark">
      <span>沪ICP备XXX号-X 上海丰调节能技术有限公司</span>
    </div>
  </div>
</template>

<script>
import Jiaohao from "@/assets/icons/Jiaohao.vue";
import VerificationCode from "@/components/verifyCode.vue";
import { login } from "@/api/model/login";
import { RolePerList } from "@/api/model/power.js";
import { ElMessage } from "element-plus";

export default {
  components: {
    Jiaohao,
    VerificationCode,
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (/^(?=.*\d)(?=.*[a-z])[a-zA-Z0-9]{6,18}$/.test(value)) {
        callback();
      } else {
        callback("请输入6-18字母数字的组合密码");
      }
    };
    const checkPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请确认您的密码"));
      } else if (value !== this.forgetdata.newadminPwd) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      checked: false,
      forgetdata: {},
      isWjmm: false,
      language: "中文",
      ruleForm: {
        adminTel: "", //13866666666,
        adminPwd: "", //123456,
        age: "",
        yesAge: "",
      },
      rules: {
        adminTel: [{ required: true, trigger: "blur", message: "不能为空" }],
        adminPwd: [{ required: true, trigger: "blur", message: "不能为空" }],
        age: [{ required: true, trigger: "blur", message: "不能为空" }],
        yesAge: [{ required: true, trigger: "blur", message: "不能为空" }],
      },
      rules1: {
        adminTel: [{ required: true, trigger: "blur", message: "不能为空" }],
        code: [{ required: true, trigger: "blur", message: "不能为空" }],
        newadminPwd: [
          { validator: validatePass, trigger: "blur" },
          { required: true, trigger: "blur", message: "不能为空" },
        ],
        queadminPwd: [{ validator: checkPass, trigger: "blur" }],
      },
      config: {
        lang: this.$TOOL.data.get("APP_LANG") || this.$CONFIG.LANG,
      },
      briefDialogTableVisible: false,
      explainDialogTableVisible: false,
      identifyCode: "",
      dialogVisible: false,
      explainDialogVisible: false,
      instructions: `OAO具有项目群、展示台、项目概况、能源（碳）管理、舒适性管理、工单报警、员工绩效、分析报告、交付输入、设备管理、项目管理、管理后台等比较全面的功能，并且集成了我们核心的专家规则库、多种智能算法以及机器学习等功能。
`,
      synopsis: `线上线下智慧陪伴式运维平台，Online and Offline Accompanying ，OAO平台。\r\n

OAO是一款融合物联网+楼宇自控数据，通过经验+AI算法引擎，实现能源、舒适性等数据可视化及相关系统优化控制的智慧数字化平台，支持云端或本地独立部署（边缘分析控制器）。平台内部嵌入了丰富的可视化人机交互画面，并支持不同通讯接口协议驱动，能有效实现各类型数据对接。\r\n

OAO通过接口对接的方式获取所需要的数据，并可以对数据进行清洗、计算分析、数据价值提取，并对数据价值进行充分利用。OAO不仅可以通过工单推送高能效操作指令，也能通过楼宇自控系统接口实现系统自控高效运行，支持建筑智慧运营。
`,
    };
  },
  created() {},
  mounted() {
    // this.ments()
  },
  methods: {
    ments() {
      document.addEventListener(
        "mousewheel",
        function (e) {
          e = e || window.event;
          if ((e.wheelDelta && event.ctrlKey) || e.detail) {
            event.preventDefault();
          }
        },
        {
          capture: false,
          passive: false,
        }
      );
    },
    langHandleCommand(i) {
      this.config.lang = i;
      if (i === "zh-cn") {
        this.language = "中文";
      } else if (i === "en") {
        this.language = "英文";
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async forget() {},
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    wjmm() {
      this.isWjmm = true;
    },
    xitongjianjie() {
      alert("111");
    },
    login() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (
            this.ruleForm.age.toLowerCase() !== this.identifyCode.toLowerCase()
          ) {
            this.$message.error("验证码错误");
            return false;
          }
          this.islogin = true;
          //获取token
          var { data: userres } = await login(this.ruleForm);
          console.log(userres, 375);
          let user = userres.tokenInfo;
          console.log(user, "user", "userres", userres);
          if (userres.code == 200) {
            this.$TOOL.data.set("TOKEN", user.token);
            this.$TOOL.data.set("USER_INFO", user.adminName);
            this.$TOOL.data.set("USER_ID", user.adminId);
            const { data: menusres } = await RolePerList({
              roleId: user.roleId,
            });
            window.localStorage.setItem("MENUS", JSON.stringify(menusres.data));
            this.$router.replace({
              path: "/projectGroup",
            });
            this.islogin = false;
          } else {
            ElMessage.error(userres.msg);
            this.islogin = false;
            return false;
          }
        }
      });
    },

    async loginWjmm() {
      // console.log(this.forgetdata);
      this.$refs.forgetForm.validate((valid) => {
        if (valid) {
          if (this.forgetdata.newadminPwd == this.forgetdata.queadminPwd) {
            this.forgetdata.adminPwd = this.forgetdata.newadminPwd;
            this.$message.info("目前暂时未提供第三方接口");
            // const res = await ForgetPassword(this.forgetdata)
            // console.log(res);
            this.isWjmm = false;
          }
        }
      });
    },
    resources(i) {
      switch (i) {
        case "jj":
          this.briefDialogTableVisible = true;
          break;
        case "sm":
          this.explainDialogTableVisible = true;
          break;
        case "jd":
          window.open("https://drbuilding.cn");
          break;
        default:
          break;
      }
    },
  },
  watch: {
    "config.lang"(val) {
      this.$i18n.locale = val;
      this.$TOOL.data.set("APP_LANG", val);
    },
  },
};
</script>

<style lang="less" scoped>
body {
  height: 100%;
}

.login-title {
  margin-left: 50px;
  margin-top: 30px;

  .title01 {
    font-family: SourceHanSansSC-light;
    font-size: 43px;
    color: #ffffff;
    font-weight: lighter;
  }

  .title02 {
    font-family: SourceHanSansSC-light;
    font-size: 18.4px;
    color: #ffffff;
    font-weight: lighter;
    font-weight: 500;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .right {
    padding-right: 30px;

    & > div {
      border: 1px solid #fff;
      padding: 3px 10px;
      margin-top: 5px;
      border-radius: 4px;

      div {
        color: #fff;
      }
    }
  }
}

.login_bg {
  width: 100%;
  height: 100%;
  min-height: 970px;
  min-width: 1800px;
  max-width: 1920px;
  max-height: 1000px;
  margin: auto;
  // background-image: url("/img/login2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.backimg {
  background-image: url("/img/OAO1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.login_main {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);

  .login-form {
    position: relative;
    padding: 0px 55px 55px 55px;
    // padding-top:-20px !important;
    .password-css {
      :deep(.el-input__inner) {
        padding-right: 120px;
      }
    }

    .verification {
      :deep(.el-input-group__append) {
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4d62a5;
      }

      :deep(.el-input__inner) {
        padding-right: 120px;
      }

      :deep(.el-input__prefix) {
        span {
          font-size: 24px !important;
        }
      }
    }

    .el-input {
      position: relative;

      :deep(.el-input__prefix) {
        color: #7f7f7f !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px 0 15px;
        border-right: 2px solid #b0b4b7;

        span {
          font-size: 22px;
        }
      }
    }

    :deep(.el-input-group__append) {
      background: transparent;
      position: absolute;
      right: 0;
      z-index: 99999;
      top: 0;
      border-left: 2px solid #b0b4b7;
      height: 100%;
      width: 107px;

      .el-checkbox {
        width: 100%;
        height: 100%;
        justify-content: center;
      }
    }

    :deep(.el-input__inner) {
      width: 480px;
      height: 50px;
      background-color: #e0e9f2;
      border: 1px solid #5fafd7;
      padding-left: 80px;
    }

    .wjmima {
      color: #7f7f7f;
      text-align: right;
      font-size: 14px;
    }
  }

  .jiaohao {
    width: 45px;
    height: 45px;
    border-radius: 50px;
    background-color: #c1d3e4;
    position: absolute;
    font-size: 20px;
    transform: rotate(270deg);
    display: flex;
    align-items: center;
    justify-content: center;
    right: -10px;
    z-index: 99999;
    top: 28%;
  }
}

.login-css-title {
  display: flex;
  position: absolute;
  left: 8.5%;
  top: 16%;
  padding-left: 0.625vw;
  .maxOAO {
    font-family: SourceHanSansSC-bold;
    font-weight: 700;
    color: #ffffff;
    font-size: 200px;
    padding-right: 10px;
  }

  .login-title-01 {
    font-family: SourceHanSansSC-bold;
    font-weight: normal;
    color: #ffffff;
    font-size: 40px;
  }

  .login-title-02 {
    position: relative;
    font-family: SourceHanSansSC-bold;
    font-weight: normal;
    color: #ffffff;
    font-size: 19.1px;
    //font-size: 24px;
  }

  .title-top {
    margin-top: 140px;
    // font-size: 10px !important;
    //margin-top: 120px;
    margin-left: 30px;
  }
}

.remark {
  color: #ffffff;
  position: absolute;
  //bottom:30px;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%);
}

:deep(.briefDialog) {
  border-radius: 20px;

  .el-dialog__header {
    text-align: center;
    color: #7f7f7f;

    span {
      font-weight: normal;
    }

    button {
      i {
        font-size: 20px;
        color: #4d62a5;
      }
    }
  }

  .el-dialog__body {
    padding: 10px 20px;
    color: #7f7f7f;

    .content {
      height: 250px;
      width: 100%;
      overflow-y: scroll;
      padding-right: 10px;
    }

    .content::-webkit-scrollbar {
      width: 3px;
      height: 1px;
      background: #eee;
    }

    .content::-webkit-scrollbar-thumb {
      background: #4d62a5;
      border-radius: 5px;
      box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    }

    .content::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
      border-radius: 10px;
      background: #ededed;
    }
  }

  .el-dialog__footer {
    text-align: center;
    padding: 25px 0;

    button {
      width: 120px;
      color: #fff;
      background: #8faadc;
      border: 1px solid #8faadc;
      padding: 5px 10px;
      border-radius: 4px;
      margin: 0 30px;
    }
    button:nth-child(2) {
      background: transparent;
      color: #8faadc;
    }
  }
}
</style>

<style lang="less">
.langPopover {
  background: rgba(172, 196, 219, 0.5) !important;
  border-radius: 6px;
  border: none;
  width: 76px !important;
  //left: 1336.33px !important;
  top: 56.3333px !important;
  left: auto !important;
  right: 29px;
}

.languageDropdown {
  background: rgba(172, 196, 219, 0.5);

  div {
    color: #fff;
    padding: 0 5px;
    margin: 0 3px;

    &:hover {
      background: #4d62a5 !important;
      color: #fff !important;
      border-radius: 6px;
    }
  }
}

.resourcesPopover {
  background: rgba(172, 196, 219, 0.5) !important;
  border-radius: 6px;
  border: none;
  width: 113px !important;
  //left: 1298.33px !important;
  top: 84.3333px !important;
  left: auto !important;
  right: 29px;
}

.resourcesDropdown {
  background: rgba(172, 196, 219, 0.5);

  div {
    color: #fff;
    font-size: 12px;
    padding: 0 5px;
    margin: 0 3px;

    &:hover {
      background: #4d62a5 !important;
      color: #fff !important;
      border-radius: 6px;
    }
  }
}

:deep(.el-dialog) {
  border-radius: 30px;
}
</style>
